<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>激光码管理</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
    <script src="/js/vue/vue.js"></script>
    <script src="/js/axios/axios.min.js"></script>
    <script src="/js/qs/qs.min.js"></script>
    <script src="/js/elementui/index.js"></script>
</head>
<body>
<div id="app">
    订单号：<input type="text" placeholder="输入订单编号" v-model="search" @input="offSearch">
    <el-button type="primary" icon="el-icon-search" @click="searchLaser">查询</el-button>
    <div style="border: solid 1px darkgrey;line-height: 60px">
        <el-button type="warning" icon="el-icon-check" @click="saveLaser">生成激光码
        </el-button>
        <el-button type="danger" icon="el-icon-delete" @click="lasersDeletes">批量删除</el-button>
    </div>

    <!--表数据-->
    <template>
        <el-table
                :data="laserTableData"
                style="width: 100%"
                :default-sort = "{prop: 'lno', order: 'descending'}"
                @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column
                    prop="order.orderId"
                    label="订单编号"
                    width="180"
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="product.pname"
                    label="产品名称"
                    width="180"
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="order.money"
                    label="交易金额"
                    width="180"
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="order.dealTime"
                    label="交易时间"
                    width="180"
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="categories.name"
                    label="所属分类"
                    width="180"
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="order.number"
                    label="数量"
                    width="180"
                    sortable>
            </el-table-column>
            <el-table-column
                    label="激光码"
                    width="180"
                    sortable>
                <template scope="scope">
                    {{scope.row.order.laserCode == 1 ? '已生成' : '未生成'}}
                </template>
            </el-table-column>
            <el-table-column
                    label="操作">
                <template slot-scope="scope">
                    <el-button
                            :disabled="scope.row.order.laserCode == 1 ? false : true"
                            size="mini"
                            type="primary"
                            icon="el-icon-edit"
                            @click="printerEdit(scope.$index, scope.row)">分配打印
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>

    <!--分页-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="loadPage"
            :current-page="current"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data(){
            return{
                laserTableData: null,//表数据
                total: 0,//总条数
                pageSize: 5,//每条页数
                current: 1,//当前页
                formLabelWidth: '120px', // 表单宽度
                multipleSelection: [],
                search: '', // 搜索订单编号
                searchOn: false // 搜索开关
            }
        },
        mounted(){
          this.loadPage(1);
        },
        methods:{
            //加载当前页.
            loadPage(current){
                    axios.get('/lasers/search',{
                        params:{
                            search: this.search,
                            current: current,
                            pageSize: this.pageSize
                        }
                    }).then(value => {
                        if (value.data.code ==1){
                            this.current = value.data.data.current;
                            this.total = value.data.data.total;
                            this.pageSize = value.data.data.size;
                            this.laserTableData = value.data.data.records;
                        }
                    })
            },
            //显示条数
            handleSizeChange(pageSize){
                this.pageSize = pageSize;
                this.loadPage(1);
            },
            //选择触发
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log("这是val:")
                console.log(val);
            },
            // 根据订单编号搜索数据
            searchLaser() {
                if (this.search != '') {
                    this.searchOn = true;
                    this.handleSizeChange(this.pageSize);
                }
            },
            // 清除输入框触发，停止搜索
            offSearch() {
                if (this.search == '') {
                    this.searchOn = false;
                    this.handleSizeChange(this.pageSize);
                }
            },
            //批量删除
            lasersDeletes(){
                if (this.multipleSelection.length>0){
                    var orderids=[];
                    this.multipleSelection.forEach(item =>{
                        orderids.push(item.order.orderId)
                    });
                    if (confirm("是否批量删除？")){
                        axios.post('/lasers/deletes',orderids).then(value => {
                            this.$message({
                                message:'批量删除成功',
                                type:'success'
                            })
                            this.loadPage(this.current);
                        });
                    }
                } else {
                    this.$message({
                        message: '请先选择要删除选项',
                        type: 'warning'
                    })
                }
            },
            //生成激光码
            saveLaser(){
                if (this.multipleSelection.length>0){
                    var orderids = [];
                    this.multipleSelection.forEach(item =>{
                        orderids.push(item.order.orderId)
                    });
                    console.log("这是订单编号");
                    console.log(orderids);
                    if(confirm("是否生成选中订单的激光码？")){
                        axios.post('/lasers/lasercode',orderids).then(value => {
                            this.$message({
                                message:'激光码生成成功',
                                type:'success'
                            })
                            this.loadPage(this.current);
                        });
                    }
                }else {
                    this.$message({
                        message: '请先选择要生成激光码的列',
                        type: 'warning'
                    })
                }
            },
            //分配打印页面跳转
            printerEdit(){
                location.href="/productionLine/sc_fp.html";
            }
        }
    })
</script>
</html>